<template>
	<RegularPage :currentTabbar="2" name="我的">
		<view class="tn-p-sm tn-pt-xs tn-flex items-center">
			<tn-avatar size="140"
				url="https://sgymv1.oss-cn-beijing.aliyuncs.com/sgym/avatar/admin/2025/01/790c1356-6ea6-49b7-86e8-0cd0532ac41b063fa8be8d8a4ce2089337c488a51d2f.png" />
			<view class="tn-ml">
				<view class="tn-text-lg tn-text-bold">
					<text class="tn-mr-xs">超级管理员</text>
					<tn-icon name="my" type="primary" bold />
				</view>
				<view class="tn-gray-dark_text tn-text-sm tn-mt-sm">账号：17262645674</view>
			</view>
		</view>
		<view class="gap"></view>
		<view v-for="(item,index) in list" :key="index" class="tn-flex items-center justify-between tn-p tn-pb-lg"
			@click="clickItem(index)">
			<view class="tn-flex items-center">
				<view class="tn-round tn-flex tn-flex-center tn-p-xs" style="width: 60rpx;height: 60rpx;"
					:class="`tn-type-${item.color}_bg`">
					<tn-icon :name="item.icon" size="34" />
				</view>
				<text class="tn-ml-sm">{{item.text}}</text>
			</view>
			<tn-icon class="tn-text-right" type="info" name="right" />
		</view>
		<view class="tn-flex tn-flex-center tn-m-xl">
			<tn-button width="80vw" height="80" bg-color="tn-gradient-bg__cool-1" text-color="rgb(255,255,255)"
				@click="loginOut">退出登录</tn-button>
		</view>
	</RegularPage>
	<tn-popup v-model="showEditPasswordPopup" open-direction="bottom" :z-index="20091" @close="closeEditPasswordPopup"
		close-btn>
		<view class="tn-p-lg">
			<view class="tn-flex-center tn-text-lg">
				修改密码
			</view>
			<tn-form ref="formRef" :model="formData" :rules="formRules">
				<tn-form-item label="原密码" prop="old_passwd" label-position="top">
					<tn-input v-model="formData.old_passwd" size="lg" placeholder="请输入原密码" clearable type="password">
						<template #prefix>
							<tn-icon type="info" name="my" />
						</template>
					</tn-input>
				</tn-form-item>
				<tn-form-item label="新密码" prop="new_passwd" label-position="top">
					<tn-input v-model="formData.new_passwd" size="lg" placeholder="请输入新密码" clearable type="password">
						<template #prefix>
							<tn-icon type="info" name="lock" />
						</template>
					</tn-input>
				</tn-form-item>
				<tn-form-item label="确认新密码" prop="confirm_passwd" label-position="top">
					<tn-input v-model="formData.confirm_passwd" size="lg" placeholder="请再次输入新密码" clearable
						type="password">
						<template #prefix>
							<tn-icon type="info" name="lock" />
						</template>
					</tn-input>
				</tn-form-item>
			</tn-form>
			<tn-button width="100%" height="80" debounce @click="confirmEditPassword">确定</tn-button>
		</view>
	</tn-popup>
</template>
<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		logoutApi,
		modifyPasswdApi
	} from "@/request/user/index.js"

	const showEditPasswordPopup = ref(false)
	const list = reactive([{
			text: '修改密码',
			icon: 'password',
			color: 'primary'
		},
		{
			text: '门店资料',
			icon: 'book',
			color: 'success'
		},
		{
			text: '店铺公告',
			icon: 'notice',
			color: 'danger'
		},
		{
			text: '监控查看',
			icon: 'video-square',
			color: 'warning'
		},
		{
			text: '我的待办',
			icon: 'history',
			color: 'info'
		}
	])
	const formRef = ref()
	const formData = reactive({
		old_passwd: '',
		new_passwd: '',
		confirm_passwd: ''
	})
	const formRules = {
		old_passwd: [{
			required: true,
			message: '请输入用户名',
			trigger: ['change', 'blur']
		}, ],
		new_passwd: [{
			required: true,
			message: '请输入密码',
			trigger: ['change', 'blur']
		}, ],
		confirm_passwd: [{
			required: true,
			message: '请再次输入新密码',
			trigger: ['change', 'blur']
		}, ]
	}
	// 点击列表项
	const clickItem = (index) => {
		switch (index) {
			case 0:
				showEditPasswordPopup.value = true
				break;
		}
	}
	// 退出登录
	const loginOut = () => {
		logoutApi().then(res => {
			if (res.code == 0) {
				uni.clearStorageSync()
				uni.reLaunch({
					url: '/pages/login/login'
				})
			}
		}).catch(err => {
			uni.showToast({
				title: err.message,
				icon: 'none'
			})
		})
	}
	// 关闭修改密码弹出层
	const closeEditPasswordPopup = () => {
		formRef.value.resetFields()
		formData.confirm_passwd = ''
		formData.old_passwd = ''
		formData.new_passwd = ''
	}
	// 确认修改密码
	const confirmEditPassword = () => {
		if (formData.new_passwd !== formData.confirm_passwd) {
			uni.showToast({
				title: '两次密码不一致',
				icon: 'none',
			})
			return
		}
		formRef.value?.validate((valid) => {
			if (valid) {
				modifyPasswdApi(formData).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: res.message,
							icon: 'none',
						})
						showEditPasswordPopup.value = false
					}
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon: 'none',
					})
				})
			} else {
				uni.showToast({
					title: '请检查必填项',
					icon: 'none',
				})
			}
		})
	}
</script>

<style scoped lang="scss">
	.store_before {
		position: absolute;
		top: 50%;
		left: -16%;
		transform: translateY(-50%);
	}
</style>